<template>
    <a-input
        :style="{width: `${width}px`, ...style}"
        :placeholder="placeholder"
        v-model="value"
        @change="handleChange"
        class="search"
        :size="size"
    >
        <template #suffix>
            <SearchSvg @click="handleSearch" />
        </template>
    </a-input>
</template>

<script setup lang="ts">
import {ref} from "vue";
import SearchSvg from "@/svg/Search.vue";

const {placeholder, size, style, width} = defineProps({
    placeholder: {
        type: String,
        default: "",
        required: false,
    },
    width: {
        type: Number,
        default: 200,
    },
    size: {
        type: String,
        default: "middle",
        validator: (val: string) => ["large", "middle", "small"].includes(val),
    },
    style: {
        type: Object,
        default: () => ({}),
    },
});

const emit = defineEmits(["onChange"]);
const value = ref("");

const handleChange = e => {
    emit("onChange", e.target.value);
};

const handleSearch = () => {
    console.log("search", value.value);
    emit("onChange", value.value);
};
</script>

<style scoped></style>
